<template>
  <div class="tags">
    <div>
        <span class="add-tag" @click="addTag">
          新增标签
        </span>
    </div>
    <ul class="current-tags">
      <li v-for="tag in tagsList" :key="tag.id"
          @click="toggleTag(tag.tagName)"
          :class="{'selected': toggleTagsList.indexOf(tag.tagName) >=0}">{{ tag.tagName }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';

@Component({
  computed:{
    tagsList(){
      return this.$store.state.tagsList
    }
  }
})
export default class Tags extends Vue {
  //用于存放选择的列表
  get toggleTagsList(){
    return this.$store.state.record.selectedTagsList
  }

  //切换标签点击状态
  toggleTag(tag: string) {
    //如果标签选择列表里存在点击的标签
    if (this.toggleTagsList.includes(tag)) {
      //使用splice把存在的标签移除（取消选择）
      this.toggleTagsList.splice(this.toggleTagsList.indexOf(tag), 1);
    } else {
      //否则添加标签到选择列表
      this.toggleTagsList.push(tag);
    }
    this.$store.commit('updateRecord',{'name':'selectedTagsList',value:this.toggleTagsList})
  }

  addTag() {
    this.$store.commit('addTag')
    this.$store.commit('saveTagsList')
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/style/helper';

.tags {
  font-size: 14px;
  padding: 16px 0;
  background-color: #fff;
  display: flex;
  flex-direction: column-reverse;
  flex-grow: 1;
  overflow: auto;

  .current-tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    > li {
      line-height: 24px;
      padding: 0 16px;
      margin: 12px;
      border-radius: 18px;
      background-color: $color-tags-button;

      &.selected {
        background-color: darken($color-tags-button, 50%);
        color: white;
      }
    }
  }

  .add-tag {
    color: #999;
    padding: 0 3px;
    margin-left: 16px;
    border-bottom: 1px solid;
  }
}
</style>